<script setup>
import { ref } from 'vue';
const activeNames = ref(['1']);
const activeNames2 = ref(['1']);
</script>

<template>
  <div>
    <!-- <van-button type="primary">主要按钮</van-button>
    <van-button type="success">成功按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button> -->
    <van-collapse v-model="activeNames">
      <van-collapse-item title="标题1" name="1">
        <van-collapse v-model="activeNames2">
          <van-collapse-item title="标题1" name="1">
            代码是写出来给人看的，附带能在机器上运行。
          </van-collapse-item>
          <van-collapse-item title="标题2" name="2">
            技术无非就是那些开发它的人的共同灵魂。
          </van-collapse-item>
          <van-collapse-item title="标题3" name="3">
            在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
          </van-collapse-item>
        </van-collapse>
      </van-collapse-item>
      <van-collapse-item title="标题2" name="2">
        技术无非就是那些开发它的人的共同灵魂。
      </van-collapse-item>
      <van-collapse-item title="标题3" name="3">
        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<style scoped>
/* 菜单变为黑色背景白色字 */
.van-collapse-item {
  --van-cell-text-color: rgb(255, 255, 255);
  --van-cell-background: rgb(0, 0, 0);
  --van-collapse-item-content-text-color: rgb(255, 255, 255);
  --van-collapse-item-content-background: rgb(0, 0, 0);

  /* 修改的样式：当前样式在本组件和子组件系生效 */
  /* 二级标签的标题文本 */
  /* :deep(.van-collapse-item__title) {
    color: rgb(255, 255, 255);
    background-color: black;
  } */
  /* 二级标题地下的内容文本 */
  /* :deep(.van-collapse-item__content){
    background-color: black;
    color: rgb(255, 255, 255);
  } */
}
</style>